import Taro, { Component } from '@tarojs/taro'
import {View, ScrollView, Text, Image } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import { getWindowHeight } from '@utils/style'
import classNames from 'classnames'
import * as actions from '@actions/order'
import './afterSaleList.scss'

const tabList = [ '申请中', '处理中', '已完成', '申请记录']
const PAGE_SIZE = 20

@connect(state => state.order, { ...actions })
class AfterSaleList extends Component {
  config = {
    navigationBarTitleText: '退换/售后'
  }

  constructor(props) {
    super(props)
    const params = this.$router.params
    let type = 0
    if (params.type) {
      type = parseInt(params.type);
    }
    this.state = {
      showType: type,
      page: 1,
      list: [],
      hasMore: false
    }
  }

  componentDidMount() {
    this.loadList(this.state.showType, 1)
  }

  loadList (type, page) {
    Taro.showLoading()
    const payload = {
      page: page,
      size: PAGE_SIZE,
      type: type
    }
    this.props.dispatchServiceOrderList(payload).then((res) => {
      if (res.list.length > 0) {
        this.setState({
          page: res.page,
          hasMore: res.hasMore,
          list: this.state.list.concat(res.list)
        })
      }
      Taro.hideLoading()
    })
  }

  onLoadMore() {
    if (this.state.hasMore) {
      this.loadList(this.state.showType, this.state.page+1)
    } else {
      Taro.showToast({
        title: '没有更多服务单了',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
  }

  handleSwitchTab (type) {
    this.setState({
      showType: type,
      list: [],
      page: 1
    })
    this.loadList(type, 1)
  }

  render() {
    const { list, showType } = this.state;
    const height = getWindowHeight(false)
    return (
      <View className='container'>
        <View className='container__tab'>
          {tabList.map((item, index) => (
            <View
              key={'tab' + index}
              className='container__tab-item'
              onClick={this.handleSwitchTab.bind(this, index)}
            >
              <Text className={classNames('container__tab-item-txt', index === showType && 'container__tab-item-txt--active')}>{item}</Text>
              {index === showType &&
              <View className='container__tab-item-line' />
              }
            </View>
          ))}
        </View>

        <ScrollView
          scrollY
          scrollTop='0'
          lowerThreshold='10'
          onScrolltolower={this.onLoadMore.bind(this)}
          className='container__list'
          style={{ height }}
        >
          {list.map((aso, index) => (
            <View className='order-card'>
              <View className='order__header'>
                <Text className='order__header-no'>服务单号:{aso.serviceNo}</Text>
                {aso.serviceType === 1 && <Text className='order__header-status'>退货</Text>}
                {aso.serviceType === 2 && <Text className='order__header-status'>换货</Text>}
              </View>

              <View className='order__item'>
                <Image className='order__item-img' src={aso.itemPic} />
                <View className='order__item-info'>
                  <View className='order__item-info-name' numberOfLines={2}>
                    {aso.itemName}
                  </View>
                  <View className='order__item-info-b'>
                    <Text className='order__item-info-b-name'>申请数量:</Text><Text className='order__item-info-b-value'>{aso.applyNum}</Text>
                  </View>
                </View>
              </View>

              <View className='order__status'>
                <View className='order__status-wrap'>
                  <Text className='order__status-label'>{aso.serviceStatus}</Text>
                  <Text className='order__status-content'>{aso.auditMessage}</Text>
                </View>
              </View>
            </View>
          ))}
        </ScrollView>
      </View>
    );
  }
}

export default AfterSaleList
